<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>用函数定义组件</title>
		<!-- 引入react核心库 -->
		<script type="text/javascript" src="../js/react.development.js"></script>
		<!-- 引入react-dom，用于支持react操作DOM -->
		<script type="text/javascript" src="../js/react-dom.development.js"></script>
		<!-- 引入babel，用户解析jsx为js -->
		<script type="text/javascript" src="../js/babel.min.js"></script>
	</head>
	<body>
		<!-- 准备一个容器 -->
		<div id="test"></div>

		<script type="text/babel">
			//1.使用函数定义一个组件
			function Hello(){
				console.log(this) //严重注意：此处的this是undefined，因为babel编译后开启了严格模式。
				return <h2>我是用函数定义的组件，（适用于：【简单组件】的定义）</h2>
			}
			
			//2.渲染组件到页面
			ReactDOM.render(<Hello/>,document.getElementById('test'))

			/* 
					执行了ReactDOM.render(<Hello/>.........后发生了什么？
							第一步：React发现了<Hello/>标签，寻找Hello组件定义的位置。
											(1).若找到了，则进行第二步
											(2).若未找到，则报错 Hello is not defined
							第二步：React发现Hello组件使用函数定义的，React去调用Hello，将返回的虚拟DOM结构渲染到页面。
					备注：
							所谓简单组件就是：没有状态的组件。
							所谓的复杂组件就是：有状态的组件。
							什么是状态呢？———— 后续章节会详细聊			
			*/

		</script>
	</body>
</html>